<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由</title>
</head>
<body>
<div id="app">
    <router-view></router-view>
    <router-link to="/login" tag="button">login</router-link>
    <router-link to="/register">register</router-link>
    <a href="#/login">login</a>
</div>

<!--定义组件-->
<template id="login">
    <div>
        <h1>登录组件</h1>
    </div>
</template>
<template id="register">
    <div>
        <h1>注册组件</h1>
    </div>
</template>
</body>
</html>
<script type="module">
    import {} from './js/vue.js'
    // 引入路由
    import {} from './js/vue-router.js'


    // 注册组件
    const NotFound = {template: '<p>Page not found</p>'}
    let login = {
        template: '#login',
        props: []
    }
    let register = {
        template: '#register',
        props: []
    }

    //定义路由
    const routes = [
        {path: '/', redirect: "login"},
        {path: '/', component: login},
        {path: '/login', component: login},
        {path: '/register', component: register},
        {path: '*', component: NotFound}
    ]
    // 创建路由
    const router = new VueRouter({
        routes
    })


    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue!',
        },
        components: {
            login: login,
            register: register
        },
        router
    })
</script>